<script setup>
import {onMounted, reactive, ref} from 'vue'
import {findRanks} from "@/apis/zyj/ranks.js";

const props = defineProps(['rankDialog'])

function initData() {
  findRanks(formInline.value, currentPage.value, pageSize.value).then(res => {
    tableData.length = 0
    tableData.push(...res.records);
    total.value = res.total;
    currentPage.value = res.current;
  })
}

onMounted(() => {
  initData();
})

const taskTableRef = ref(); // 表格ref
const dialogVisible = ref(true)
const pickTableData = ref()
const formInline = ref({
  rankNo: '',
  rankArrangement: '',
  rankArrangementName: '',
  salaryCap: '',
  salaryMinimum: ''
})

// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

const tableData = reactive([])

// table选择项发生变化时会触发该事件
const selectClick = (selection, row) => {
  pickTableData.value = row
  if (selection.length > 1) {
    let del_row = selection.shift();
    taskTableRef.value.toggleRowSelection(del_row, false); // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
  }
}

const onSearch = () => {
  // The filtering is handled by the computed property
  initData()
}

const onReset = () => {
  formInline.value = {
    rankNo: '',
    rankArrangement: '',
    rankArrangementName: '',
    salaryCap: '',
    salaryMinimum: ''
  }
}

const emit = defineEmits(['close-dialog','pick-rank'])
// 关闭弹窗
const handleClose = () => {
  emit('close-dialog')
}
// 确定
const confirm = () => {
  emit('pick-rank', pickTableData.value)
}

//分页
const handleSizeChange = (val) => {
  initData()
}
//分页
const handleCurrentChange = (val) => {
  initData()
}

</script>

<template>
  <el-dialog
      title="职级选择"
      v-model="props.rankDialog"
      width="80%"
      :before-close="handleClose"
      append-to-body
      align-center
  >
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="职级编码">
        <el-input v-model="formInline.rankNo" placeholder="请输入职级编码"/>
      </el-form-item>
      <el-form-item label="职级层次">
        <el-input v-model="formInline.rankArrangement" placeholder="请输入职级层次"/>
      </el-form-item>
      <el-form-item label="职级层次名称">
        <el-input v-model="formInline.rankArrangementName" placeholder="请输入职级层次名称"/>
      </el-form-item>
      <el-form-item label="薪资范围">
        <el-input v-model="formInline.salaryMinimum" placeholder="请输入下限" style="width: 150px;"/>
        <span class="mx-2">-</span>
        <el-input v-model="formInline.salaryCap" placeholder="请输入上限" style="width: 150px;"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table ref="taskTableRef" :data="tableData" @select="selectClick" height="400px" style="width: 100%">
      <el-table-column type="selection" width="55"/>
      <el-table-column prop="rankNo" label="职级编码"/>
      <el-table-column prop="rankArrangement" label="职级层次"/>
      <el-table-column prop="rankArrangementName" label="职级层次名称"/>
      <el-table-column align="center" label="薪资范围(元)" width="300">
        <el-table-column align="center" prop="salaryMinimum" label="薪资范围下限" width="150"/>
        <el-table-column align="center" prop="salaryCap" label="薪资范围上限" width="150"/>
      </el-table-column>
      <el-table-column prop="remark" label="备注"/>
    </el-table>
    <div class="pagination">
      <el-pagination
          v-model:currentPage="currentPage"
          v-model:pageSize="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :small="false"
          :disabled="false"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>


<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

/deep/ .el-table__header-wrapper .el-checkbox {
  display: none
}

.pagination {
  margin-top: 20px;
  text-align: left;
}

.el-pagination {
  justify-content: flex-end;
}
</style>
